<template>
	<div class="app-container">
		<h2>5.2.1&nbsp;结构安全性能评估</h2>
		<el-card v-for="(item,index) in items" :key="item.id" class="evaluation-item" shadow="hover">
			<div slot="header" class="clearfix">
				<span class="number">{{ item.id }}.&nbsp;{{ item.title }}</span>
				<div class="options">
					<evaluationStd :_aspect="item.title" :_evaluatioon_index="item.evaluation_index" class="evaluation" />

					<lock :_locked="score[index].locked" :-pop-over-show="false" class="lock" @click.native="handleLock(index)" />
				</div>
			</div>
			<el-card
			  v-if="item.id ==2||item.id == 4||item.id ==5"
			  v-for="(i,_index) in item.children_question"
			  :key="_index"
			  class="children-question"
			  shadow="never"
			>
				<div slot="header" class="children-header">
					<div>{{ i.aspect }}.（{{ i.max_score }}分）</div>
				</div>
				<el-form ref="form" :model="i" label-width="100px">
					<el-form-item v-if="i.id!= 1" label="是否满足">
						<el-radio-group v-model="score[index].children_question[_index].satisfy">
							<el-radio :label="true" :disabled="score[index].locked" @change="addScore(index,_index, true)">是</el-radio>
							<el-radio :label="false" :disabled="score[index].locked" @change="addScore(index,_index,false)">否</el-radio>
						</el-radio-group>

					</el-form-item>
					<el-form-item v-if="!score[index].children_question[_index].satisfy&&i.id !==1" label="不满足简述">
						<el-input v-model="score[index].description" label="不满足简述" :disabled="score[index].locked" type="textarea" />
					</el-form-item>
				</el-form>
			</el-card>
			<el-card v-if="item.id ==1||item.id == 3"  class="children-question" shadow="never">
				<div slot="header" class="children-header">
					<div>{{ item.aspect }}.（{{ item.max_score }}分）</div>
				</div>
				<el-form ref="form" :model="item" label-width="100px">
					<el-form-item v-if="item.id==1" label>
						<el-radio-group v-model="score[index].score">
							<el-radio :label="5" :disabled="score[index].locked">建筑（单元）形体规则</el-radio>
							<el-radio :label="3" :disabled="score[index].locked">建筑（单元）形体基本规则</el-radio>
							<el-radio :label="0" :disabled="score[index].locked">建筑（单元）形体不规则</el-radio>
						</el-radio-group>
						<!-- <el-input v-model="item.de" label="能耗降低幅度" /> -->
					</el-form-item>
					<el-form-item v-if="item.id!= 1" label="是否满足">
						<el-radio-group v-model="score[index].satisfy">
							<el-radio :label="true" :disabled="score[index].locked" @change="addScore1(index, true)">是</el-radio>
							<el-radio :label="false" :disabled="score[index].locked" @change="addScore1(index,false)">否</el-radio>
						</el-radio-group>

					</el-form-item>
					<el-form-item v-if="!score[index].satisfy&&item.id !==1" label="不满足简述">
						<el-input v-model="score[index].description" label="不满足简述" :disabled="score[index].locked" type="textarea" />
					</el-form-item>
				</el-form>
			</el-card>
			<!-- <div class="socre">
        <div class="score-title">得分&nbsp;&nbsp;</div>
        <div class="sum-score">{{item.score}}&nbsp;分</div>
      </div>-->
		</el-card>
		<div id="choose">
			<router-link to="/addition/first">
				<el-button type="primary" icon="el-icon-arrow-left">上一项</el-button>
			</router-link>

			<router-link to="/calculate/pre-rate">
				<el-button type="primary" style="margin-left:20px">
					下一项
					<i class="el-icon-arrow-right el-icon--right"></i>
				</el-button>
			</router-link>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import Lock from "@/components/Lock";
	import EvaluationStd from "@/components/EvaluationStd";

	export default {
		name: "Second",
		components: {
			Lock,
			EvaluationStd
		},
		data() {
			return {
				items: [
					{
						id: 1,
						title: "结构概念设计",
						aspect: "根据国家标准《建筑抗震设计规范》GB50011-2010规定的建筑形体规则性评分",
						max_score: 5,
						evaluation_index: "",
					},
					{
						id: 2,
						title: "设防水平提高",
						aspect: '',
						children_question: [{
								aspect: "计算提高一度",
								max_score: 5
							},
							{
								aspect: "构造提高一度",
								max_score: 3
							},
						],
						evaluation_index: "",
					},
					{
						id: 3,
						title: "采用性能化分析设计方法",
						aspect: "采用性能化设计方法设计",
						max_score: 2,
						evaluation_index: "",
					},
					{
						id: 4,
						title: "采用消能减震技术、隔震技术、抗风技术",
						aspect: '',
						children_question: [
							{
								aspect: "采用隔震技术",
								max_score: 5
							},
							{
								aspect: "采用消能减震技术",
								max_score: 5
							},
							{
								aspect: "采用风控技术",
								max_score: 3
							},
						],
						evaluation_index: "",
					},
					{
						id: 5,
						title: "采用轻质材料",
						aspect: '',
						children_question: [
							{
								aspect: "采用轻质隔墙",
								max_score: 3
							},
							{
								aspect: "采用轻质楼面",
								max_score: 3
							},
							{
								aspect: "采用轻质围护结构",
								max_score: 3
							},
						],
						evaluation_index: "",
					},
				],
				score: []
			};
		},
		computed: {
			...mapGetters({
				additionScore: "addition",
				eId: "eId"
			})
		},
		created() {
			this.$store.dispatch("project/getHistory", this.eId);
			this.score = this.additionScore._5_2_1;
			if (this.score.length === 0) {
				console.log("我等于-0")
				this.score = [
						{
							satisfy: null,
							description: '',
							locked: false,
							score: -1
						},
						{
							children_question: [{
								satisfy: null,
								description: '',
								score: 0
							}, {
								satisfy: null,
								description: '',
								score: 0
							}],
							locked: false
						},
						{
							satisfy: null,
							description: '',
							locked: false,
							score: 0
						},
						{
							children_question: [{
								satisfy: null,
								description: '',
								score: 0
							}, {
								satisfy: null,
								description: '',
								score: 0
							},
							{
								satisfy: null,
								description: '',
								score: 0
							}],
							locked: false
						},
						{
							children_question: [{
								satisfy: null,
								description: '',
								score: 0
							}, {
								satisfy: null,
								description: '',
								score: 0
							},
							{
								satisfy: null,
								description: '',
								score: 0
							}],
							locked: false
						},
					]
			}
		},
		beforeDestroy() {
			this.$store.dispatch("project/updateScore", {
				score: this.score,
				phase: "addition",
				aspect: "_5_2_1"
			});
		},
		methods: {
			// 计算分数的时候，第一项可能要先获取项目资料

			handleLock(index) {
				this.score[index].locked = !this.score[index].locked;
			},
      addScore1(index, whether) {
      	if (whether) {
      		this.score[index].score = this.items[index].max_score;
      	} else {
      		this.score[index].score = 0;
      	}
      },
			addScore(index, _index, whether) {
			  if (whether) {
			    this.score[index].children_question[_index].score = this.items[
			      index
			    ].children_question[_index].max_score;
			  } else {
			    this.score[index].children_question[_index].score = 0;
			  }
			}
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		h2 {
			text-align: center;
		}

		#choose {
			text-align: center;
			margin: 20px auto;
		}

		.evaluation-item {
			width: 60%;
			margin: 10px auto;

			>>>.el-card__header {
				padding: 10px 20px;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				overflow: hidden;
				position: relative;

				.number {
					font-weight: bold;
					position: absolute;
					bottom: 0;
				}

				.options {
					float: right;
					bottom: 0;

					.lock,
					.evaluation {
						display: inline-block;
					}
				}
			}

			.children-question {
				width: 100%;
				border: none;

				>>>.el-card__header {
					border-bottom: 0px;
					padding: 0px 20px;
				}

				>>>.el-card__body {
					padding: 10px 20px;
				}
			}
		}
	}
</style>
